<template>
	<view class="search-content">
		<view class="head">
			<search-view></search-view>
		</view>
		<view class='hot'>
			<p v-if='hotDataLength == 0 ? false:true'>
				<span>热门搜索</span>
				<image @click='delHot' class='img' src="@/static/icon/delete.png"></image>
			</p>
			<p>
				<span @click='searchHot(item)' v-for='(item,index) in hotData' :key='index'>{{ item }}</span>
			</p>
		</view>
		<scroll-view scroll-x="true" scroll-with-animation="true" class='scroll' v-if='searchResult.length == 0 ? true:false'>
			<view class='content'>
				<view class='list'  v-for='(item,index1) in hotList' :key='index1'>
					<view class='title'>{{ item.title }}</view>
					<ul>
						<li v-for='(items,index2) in item.list' :key='index2' @click='cardDetail(items,index2)'>
							<view class="imgBox">
								<image class='img' :src="items.img"/>
								<span class='icon'>{{ index2 + 1 }}</span>
							</view>
							<p>
								<span>{{ items.name }}</span>
								<span>{{ items.text }}：{{ items.search }}</span>
							</p>
						</li>
					</ul>
				</view>
			</view>
		</scroll-view>
		<love-heart>
			<span slot='title'>{{ searchResult.length == 0 ? '为您推荐':'搜索发现' }}</span>
		</love-heart>
		<view class="card" v-if='searchResult.length == 0 ? false:true'>
			<card-item :cardList="searchResult"></card-item>
		</view>
		<card-view v-if='searchResult.length == 0 ? true:false'></card-view>
	</view>
</template>

<script>
	import searchView from '@/components/search.vue'
	import loveHeart from '@/pages/tab3/view/love_heart.vue'
	import cardView from '@/pages/tab1/view/card.vue'
	import cardItem from '@/components/cardItem.vue'
	import hotList from '@/components/json/hotlist.json'
	export default{
		components:{
			searchView,
			loveHeart,
			cardView,
			cardItem
		},
		data(){
			return{
				searchResult: [],
				hotList: hotList
			}
		},
		computed:{
			hotData(){
				return this.$store.getters.getHotData
			},
			hotDataLength(){
				return this.$store.getters.getHotDataLength
			}
		},
		onLoad() {
			uni.$on('sendSearch',data=>{
				this.searchResult = data
			})
		},
		methods:{
			// 热搜
			searchHot(item){
				this.searchResult = []
				this.$store.state.a.allData.map(items=>{
					if(items.name.includes(item)){
						console.log(items)
						this.searchResult.push(items)
					}
				})
			},
			delHot(){
				this.$store.state.a.hotData = []
			},
			// 进入商品详情页
			cardDetail(items){
				console.log(items)
				uni.navigateTo({
					url:'/components/cardItems',
					success(res) {
						res.eventChannel.emit('sendDetail', { data: items })
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	.search-content{
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
		background-image: linear-gradient(to right bottom,#FFFFFF,#F0F8FF);
		.head,.hot{
			width: 95%;
			margin-left: 2.5%;
		}
		.hot{
			margin-top: 30rpx;
			p{
				display: flex;
				align-items: center;
				line-height: 90rpx;
			}
			p:first-child{
				height: 90rpx;
				justify-content: space-between;
				.img{
					width: 40rpx;
					height: 40rpx;
				}
			}
			p:last-child{
				flex-wrap: wrap;
				span{
					width: 110rpx;
					height: 60rpx;
					margin-right: 25rpx;
					margin-bottom: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #555555;
					background-color: #F1F1F1;
				}
			}
		}
		.scroll{
			margin-top: 30rpx;
			.content{
				width: 100%;
				padding-left: 2.5%;
				padding-right: 850rpx;
				display: flex;
				.list{
					width: 500rpx;
					padding-bottom: 30rpx;
					border-radius: 20rpx;
					margin-right: 40rpx;
					border: 1px solid rgba(0,191,255,.4);
					box-shadow: 0 0 10rpx rgba(0,191,255,.4);
					background-color: white;
					.title{
						width: 100%;
						height: 100rpx;
						border-radius: 20rpx;
						line-height: 100rpx;
						box-sizing: border-box;
						padding-left: 4%;
						background-image: linear-gradient(to bottom,rgba(0,191,255,.3),rgba(255,255,255,1));
						color: rgba(30,144,255,.8);
					}
					ul{
						padding: 0;
						width: 480rpx;
						margin-left: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						li{
							width: 100%;
							height: 150rpx;
							display: flex;
							align-items: center;
							position: relative;
							.imgBox{
								position: relative;
								width: 120rpx;
								height: 120rpx;
								.img{
									width: 120rpx;
									height: 120rpx;
									border-radius: 15rpx;
								}
								.icon{
									width: 30rpx;
									height: 30rpx;
									font-size: 25rpx;
									background-color: rgba(30,144,255,.8);
									color: white;
									display: flex;
									justify-content: center;
									align-items: center;
									position: absolute;
									left: 0;
									top: 0;
									border-top-left-radius: 15rpx;
									border-bottom-right-radius: 15rpx;
								}
							}
							p{
								width: 70%;
								margin-left: 20rpx;
								height: 100rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								span:first-child{
									width: 95%;
									font-size: 32rpx;
									color: rgba(0,0,0,.8);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
								span:last-child{
									font-size: 28rpx;
									color: rgba(0,0,0,.5);
								}
							}
						}
					}
				}
			}
		}
	}
</style>
